import React, { useState } from 'react';
import { 
  Card, 
  Form, 
  Input, 
  Button, 
  message, 
  Spin, 
  Row, 
  Col,
  Avatar
} from 'antd';
import { UserOutlined, MailOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { updateUser } from '@/services/userApi';

const Profile: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const { initialState, setInitialState } = useModel('@@initialState');
  const currentUser = initialState?.currentUser;

  // 更新用户信息
  const onUpdateProfile = async (values: any) => {
    if (!currentUser) return;
    
    setLoading(true);
    try {
      const updatedUser = await updateUser(currentUser.id, values);
      setInitialState({
        ...initialState,
        currentUser: updatedUser,
      });
      message.success('个人信息更新成功');
    } catch (error) {
      message.error('更新失败');
    } finally {
      setLoading(false);
    }
  };

  if (!currentUser) {
    return <div style={{ padding: 24, textAlign: 'center' }}><Spin size="large" /></div>;
  }

  return (
    <div>
      <Card title="个人中心" style={{ marginBottom: 16 }}>
        <Row gutter={24}>
          <Col span={8}>
            <div style={{ textAlign: 'center' }}>
              <Avatar size={100} icon={<UserOutlined />} />
              <h3 style={{ marginTop: 16 }}>{currentUser.username}</h3>
              <p>{currentUser.email || '暂无邮箱'}</p>
            </div>
          </Col>
          
          <Col span={16}>
            <Card title="基本信息" size="small">
              <Form
                form={form}
                layout="vertical"
                initialValues={{
                  username: currentUser.username,
                  email: currentUser.email,
                  firstName: currentUser.first_name,
                  lastName: currentUser.last_name,
                }}
                onFinish={onUpdateProfile}
              >
                <Form.Item
                  name="username"
                  label="用户名"
                  rules={[{ required: true, message: '请输入用户名' }]}
                >
                  <Input prefix={<UserOutlined />} disabled />
                </Form.Item>
                
                <Row gutter={16}>
                  <Col span={12}>
                    <Form.Item
                      name="firstName"
                      label="姓"
                    >
                      <Input />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                      name="lastName"
                      label="名"
                    >
                      <Input />
                    </Form.Item>
                  </Col>
                </Row>
                
                <Form.Item
                  name="email"
                  label="邮箱"
                  rules={[
                    { type: 'email', message: '请输入正确的邮箱格式' }
                  ]}
                >
                  <Input prefix={<MailOutlined />} />
                </Form.Item>
                
                <Form.Item>
                  <Button type="primary" htmlType="submit" loading={loading}>
                    更新信息
                  </Button>
                </Form.Item>
              </Form>
            </Card>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default Profile;